<template>
  <div>
  <el-row   v-loading="loading">
     <el-col :span="12">
    <el-form ref="elForm" :model="formData" :rules="rules"
     class="form-body"
     size="medium"
     label-suffix="："
     label-width="140px">

      <h3 style="margin-top:0" class="form-section-title">基本信息</h3>
      
      <el-form-item label="广告位名称" prop="placeName">
        <el-input v-model="formData.placeName" 
        placeholder="请输入广告位名称"
         clearable 
         :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <!--  -->
      <el-form-item label="所属媒体" prop="ownerid">
            <el-select v-model="formData.ownerid" placeholder="不限制"  :style="{width: '60%'}">
              <el-option v-for="(item, index) in sitesOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
      </el-form-item>

      <el-form-item label="标签">
         <el-row >
            <el-col :span="24">
              <div class="tagInputBox">
        <!-- <el-input v-model="formData.adtags" type="textarea" placeholder="请输入标签"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input> -->
          <el-tag
              :key="index"
              v-for="(tag,index) in dynamicTags"
              closable
              size="small"
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"        
              v-model="tagInputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"  >
            </el-input>
            </div>
            </el-col>
         </el-row>
      </el-form-item>
       <el-form-item label="排序顺序" prop="orderid">
        <el-input v-model="formData.orderid" 
        placeholder="请输入数字"
         clearable 
         :style="{width: '25%'}">
        </el-input>
        <label style="color:#888; font-size:13px">数字越大此广告位于同类型的页面中展示时越排在前。</label>
      </el-form-item>
      <!-- 排序 -->
      <el-form-item label="载体类型" prop="adtype">
        <el-radio-group v-model="formData.adtype" size="mini">
          <el-radio-button v-for="(item, index) in adtypeOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="广告位类型" prop="placeType">
        <el-radio-group v-model="formData.placeType" size="mini">
          <el-radio-button v-for="(item, index) in placeTypeOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="广告位尺寸">
        <div class="place-size">
            {{placeWH}}
          </div>
        <place-size-input v-bind:currtabs="placeCurrtabs" v-bind:defaulttabkey="placeDefaultTabkey"
          v-on:on-place-size-change="placeSizeChange"
         ></place-size-input>
         
        
      </el-form-item>
      
      <el-form-item label="计费方式" prop="costType">
        <el-radio-group v-model="formData.costType" size="medium">
          <el-radio v-for="(item, index) in costTypeOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
  <!-- 刊例价 -->
       <el-form-item  >
         <el-row v-if="showPriceInput">
            <el-col :span="24">
              <div class="el-form-item-line ">
             <label class="el-form-item__label">刊例价</label>
                  <el-input v-model="formData.perPrice"    :style="{width: '50%'}">
                  </el-input><span> {{priceUnit[formData.costType]}} </span>
               </div>
            </el-col>

            <el-col :span="24">
               <div  class="el-form-item-line ">
               <label class="el-form-item__label">折扣率</label>
                  <el-input v-model="formData.zhekou"    :style="{width: '50%'}">
                  </el-input><span> % </span>
              </div>
            </el-col>

         </el-row>
      </el-form-item>
 <!-- 刊例价 end -->
     <!-- <el-form-item label="样式配置" prop="cssitem">
        <el-radio-group v-model="formData.cssitem" size="medium">
          <el-radio v-for="(item, index) in cssitemOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="打底样式" prop="blackstype">
        <el-select v-model="formData.blackstype" placeholder="请选择打底样式" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in blackstypeOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item size="large" class="form-submit-panel">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
     </el-col>
  </el-row>
  </div>
</template>
<script>
import ModelPlace from "./ModelPlace.js";
import Options from "./Options";

export default {
  components: {},
  props: ['idplace'],
  mixins: [ModelPlace],
  data() {
    return  {
      dynamicTags: [ ],
      tagInputValue:"",
     // placeWH:"",
      loading: false,
      //placeDefaultTabkey, //默认尺寸显示
     // placeCurrtabs, //默认尺寸tab显示
      formData: {
        id:0,
        placeName: "",
        adtags: "",
        adtype: "1",
        orderid: 0,
        placeType: "1", //广告位类型
        placeWidth: 0,
        placeHeight: 0,
        sizeDot: "",
        costType: "1",
        perPrice: "",
        zhekou: "",
        ownerid: undefined, //所属媒体id
      },
      sitesOptions:[],
      sqlData:{}, // 修改是存放 数据库返回的记录值对象
      //  平台类型 数据 在 Options.js 里面定义，方便多地方调用
      adtypeOptions: Options.adtypeOptions,
      //刊例价 的单位，按计价类型 cpm、cpd、cpc 显示不一样的单位。
      priceUnit: Options.priceUnit,
    }  
  },
  computed: {
    id(){
      return this.idplace ? this.idplace :0;
    },
    //根据 载体类型，选择切换广告位类型
    placeTypeOptions(){
      var type = {
        "1":[{"label": "嵌入", "value": "1"}],
        "2":[{"label": "嵌入", "value": "1"},{ "label": "悬浮","value": "2"}],
        "3":[{"label": "嵌入", "value": "1"},{ "label": "开屏","value": "3"},
          { "label": "信息流","value": "4"}
        ]
      }
      return type[this.formData.adtype];
    
    }, 
    //是否显示刊例价
    showPriceInput(){
      if(this.formData.costType>1){
        return true;
      }else{
        return false;
      }
    },
    //设置广告位尺寸选项卡
    placeDefaultTabkey(){
      console.log(this.formData.adtype+ ''+ this.formData.placeType +'0')
      return this.formData.adtype+ ''+ this.formData.placeType +'0';
    },
    //设置广告位尺寸选项卡
    placeCurrtabs(){
      console.log("currtabs", this.formData.adtype+ ''+this.formData.placeType)
       return this.formData.adtype+ ''+this.formData.placeType;
    },
    //当前高宽值
    placeWH(){
      if(this.formData['placeWidth'] && this.formData['sizeDot'] && this.formData['placeHeight']){
         return "当前宽高值：" + this.formData['placeWidth'] +
              ' '+ this.formData['sizeDot'] + 
              ' ' + this.formData['placeHeight'];
      }
      return '';
       
    }
  },
  watch: {},
  created() {
    //初始化编辑时候的数据
    //console.log( this.id )
    if(this.id >0 ){
      PlaceAPI.getOnePlace( this.id ). then( (data) =>{
           for(var i in this.formData){
             if(data[i]){
                this.formData[i] = data[i];
             }
           }
           //标签数据
           this.dynamicTags = data['adtags'].split(",");
           //广告位尺寸
          // this.placeWH =;
           this.sqlData = data;
          //  console.log('getOnePlace',data)
      })
    }
    //获取站点或者app
     SiteAPI.getAllSites().then(data => {
            //console.log(data)  
            let tmp = [{value: 0, label: "不限制",disabled: false}];               
            for(let i in data){
              tmp.push({value: data[i]['idsite'], label: '['+ data[i]['idsite']+']' + data[i]['name'],disabled: false})
            }
            this.sitesOptions = tmp;
      })
  },
  mounted() {},
  methods: {
    //删掉一个标签
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
     },
 //输入标签确认
      handleInputConfirm() {
        let inputValue = this.tagInputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }   
        this.tagInputValue = '';
        //console.log(this.dynamicTags)
      },
      //广告尺寸 子组件 事件
      placeSizeChange( wh){
        //console.log(wh)
        //this.placeWH = "当前宽高值：" + wh.size;
        this.formData.placeHeight = wh.h;
        this.formData.placeWidth = wh.w;
        this.formData.sizeDot = wh.dot;
        // placeWH 通过 computed 实现计算显示
      },
    submitForm() {
      //合并标签数据
      this.formData.adtags = this.dynamicTags.join(","); 
      // 表单处于loading状态 
      this.loading = true;
      this.$refs['elForm'].validate(valid => {
        if (!valid) return;
        //  console.log(this.formData)
        //  提交数据到接口，更新和新建通过 formData.id > 0 来区别
         PlaceAPI.createAdPlace(this.formData).then((data)=>{
            this.loading = false;
            this.$message({ message: data.msg, type: "success" });
            // 触发关闭Drawer 侧滑层 关闭
            this.$emit("onclosedrawer",{ from: 'submit'})
         })
         
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
 